<template>
  <div class="w-table-filter">
    <div class="w-table-filter-l">
      <el-form
        ref="form"
        class="w-table-filter-form"
        :inline="true"
        label-position="right"
        label-width="70px"
        :show-message="false"
        @keyup.enter="save"
      >
        <el-form-item label="所属学院">
          <el-select
            v-model="filterData.collegeId"
            class="w-table-filter-input"
            clearable
            placeholder="请选择"
            @change="filterData.professionId = null"
          >
            <el-option
              v-for="item in collegeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="所属系">
          <el-select
            v-model="filterData.professionId"
            class="w-table-filter-input"
            clearable
            placeholder="请选择"
          >
            <el-option
              v-for="item in professionOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="培养层次">
          <el-select
            v-model="filterData.dictCultivationLevel"
            class="w-table-filter-input"
            clearable
            placeholder="请选择"
          >
            <el-option
              v-for="dict in dict.cultivation_level"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="班级年份">
          <el-date-picker
            v-model="filterData.grade"
            class="w-table-filter-input"
            clearable
            placeholder="请选择"
            type="year"
            value-format="YYYY"
          />
        </el-form-item>

        <el-form-item label="班级名称">
          <el-input
            v-model.trim="filterData.className"
            class="w-table-filter-input"
            clearable
            placeholder="请输入"
          />
        </el-form-item>

        <el-form-item label="日期区间">
          <el-date-picker
            v-model="dateValue"
            end-placeholder="结束日期"
            start-placeholder="开始日期"
            type="daterange"
            value-format="YYYY-MM-DD"
          />
        </el-form-item>

        <el-form-item>
          <el-button icon="search" type="success" @click="save">
            搜索
          </el-button>

          <el-button icon="refresh" type="info" @click="clear">
            重置
          </el-button>
        </el-form-item>
      </el-form>
    </div>

    <div class="w-table-filter-r">
      <slot />
    </div>
  </div>
</template>

<script>
  import { mixinDict, mixinCollegeData } from '@/utils/filter-mixin.js'
  import { formatDate } from '@/utils/tool.js'
  export default {
    // 将一些常数据混入到当前组件中,以简化代码
    mixins: [mixinCollegeData, mixinDict],
    emits: ['save'],
    data() {
      return {
        def: {
          name: '',
          collegeId: null,
          professionId: null,
          classId: null,
          grade: formatDate(new Date(), 'Y'),
        },

        filterData: {},

        collegeOptions: [],
        professionOptions: [],
        classOptions: [],

        // 静态字典
        dictMap: ['cultivation_level'],
        dict: {},
      }
    },

    computed: {
      dateValue: {
        get() {
          return [this.filterData.startDate, this.filterData.endDate]
        },

        set(newVal) {
          if (!newVal) {
            this.filterData.startDate = null
            this.filterData.endDate = null
            return
          }
          this.filterData.startDate = newVal[0]
          this.filterData.endDate = newVal[1]
        },
      },
    },

    created() {
      this.filterData = { ...this.def }
    },

    mounted() {},

    methods: {
      clear() {
        for (let f1 in this.filterData) {
          this.filterData[f1] = this.def[f1] || null
        }
        this.save()
      },

      save() {
        const d = { ...this.filterData }
        this.$emit('save', d)
      },
    },
  }
</script>

<style lang="scss" scoped></style>
